<template>
  <div>
		<n-space vertical>
			<n-button type="primary" @click="add">
				<template #icon>
					<n-icon>
						<icon-plus />
					</n-icon>
				</template>
				添加班级
			</n-button>
			<n-radio-group
				v-model:value="params.active"
				@update:value="getTable">
				<n-radio-button :value="1">进行中</n-radio-button>
				<n-radio-button :value="0">未开班</n-radio-button>
				<n-radio-button :value="2">已结课</n-radio-button>
			</n-radio-group>
		</n-space>
		<section class="class-list">
			<ClassItem
				v-for="(item, index) in tableData.records"
				:entry="item"
				:itemIndex="(index % 3 + 1)"
				:getTable="getTable"
				@click="showDetail($event, item)"/>
		</section>
		<n-modal
			style="width: 400px;"
			v-model:show="showEditProps.show"
			:title="showEditProps.title"
			preset="card"
			draggable>
			<Suspense>
				<template #default>
					<component :is="Edit" :editProps="showEditProps" :getTable="getTable" />
				</template>
			</Suspense>
		</n-modal>
	</div>
</template>

<script setup lang="jsx">
import { defineAsyncComponent, reactive, ref } from 'vue'
import { createPagination, getTableData, remove } from './data'
import IconPlus from '@@/icons/plus'
import ClassItem from './components/classItem'
const props = defineProps(['showDetail'])
const Edit = defineAsyncComponent(() => import('./edit'))
const name = ref('')
const params = reactive({
	pageNo: 1,
	pageSize: 8,
	active: 1
})
const tableData = reactive({
	records: [],
	pages: 0,
	name: ''
})
const pagination = reactive(createPagination({ params, callback: getTableData }))
const showEditProps = reactive({
	title: '',
	id: null,
	show: false
})
function getTable () {
	getTableData(params, content => { 
		tableData.pages = content.pages
		tableData.records = content.records
	})
}
function add () {
	showEditProps.id = null
	showEditProps.title = '添加班级'
	showEditProps.show = true
}
function showDetail(event, item) {
	if (event.target.className !== 'n-button__content' && item.active === 1) {
		props.showDetail(item.id)
	}
}
getTable()

</script>

<style scoped lang="scss">
.class-list {
	margin-top: 8px;
	display: grid;
	grid-template-columns: repeat(5, 245px);
	grid-row-gap: 24px;
	justify-content: space-between;
	background-color: #F5F7F9;
	padding: 20px 0;
}
</style>